<!-- 全局悬浮客服按钮 -->
<template>
	<view class="tab-all">

		<!-- #ifdef H5 -->
		<uni-link :href="hrefUrl" :showUnderLine="false">
			<view class="submitButton-box-left">
				<uni-icons custom-prefix="iconfont2" type="icon-kefu" size="40rpx"></uni-icons>
				<text class="submitButton-box-left-text">在线咨询</text>
			</view>
		</uni-link>
		<!-- #endif -->


		<!-- 微信小程序平台 -->
		<!-- #ifdef MP-WEIXIN -->
		<button class="submitButton-box-left2" open-type="contact" @bindcontact="bindcontact">
			<uni-icons custom-prefix="iconfont2" type="icon-kefu" size="30"
				style="line-height: 0; height: 30px;margin-top: 18rpx;"></uni-icons>
			<text class="submitButton-box-left-text">在线咨询</text>
		</button>
		<!-- #endif -->
	</view>
</template>

<script>
	// 引入vuex
	import {
		mapState,
		mapGetters,
		mapActions,
		mapMutations
	} from 'vuex'


	export default {
		name: "fab-all",
		data() {
			return {};
		},
		computed: {
			...mapState({
				hrefUrl: state => state.user.hrefUrl // 客服链接
			})
		},
		
		methods:{
			bindcontact(e){
				console.log(e, '客服消息会带哦');
			}
		}

	}
</script>

<style lang="less" scoped>
	.tab-all {
		position: fixed;
		right: 60rpx;
		bottom: 160rpx;
		#box(120rpx, 120rpx, 100%, #fff);
		#flex(-, center, center);
		box-shadow: 0 0 24rpx 12rpx rgba(#000, .1);
		z-index: 1000;

		&:active {
			background-color: #eee;

		}

		.submitButton-box-left {
			#flex(column, -, center);


			.submitButton-box-left-text {
				margin-top: 12rpx;
				#font(22rpx, #999);
			}
		}

		.submitButton-box-left2 {
			#flex(column, center, center);
			padding: 0 !important;
			overflow: visible;
			background-color: rgba(#fff, 0);
			height: 100%;


			.submitButton-box-left-text {
				margin-top: -24rpx;
				#font(22rpx, #999);
			}

			&::after {
				border: none;
				background-color: rgba(#fff, 0);
				border-radius: 0;
			}

			&:hover {
				background-color: rgba(#fff, 0);
			}
		}



	}
</style>